<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		li{
			list-style: none;
		}
		ul{
			border: 1px solid grey;
			width: 80px;
			height: 300px;
			padding-left:0;
			position: fixed;
			left: 5px;
			top: 15%;
		}
	    a{
	    	text-decoration: none;
	    	color: black;
	    }
	    .a1,.a2,.a3,.a4,.a5{
	    	height: 600px;
	    	width: 80%;
	    	border: 3px solid skyblue;
	    	margin: 50px auto;
	    }
	</style>
</head>
<body>
	<ul>
		<li>
			<a href="#a1">
				上海
			</a>
		</li>
		<li>
			<a href="#a2">
				北京
			</a>
		</li>
		<li>
			<a href="#a3">
				广州
		</li>
		<li>
			<a href="#a4">
				深圳
			</a>
		</li>
		<li>
			<a href="#a5">
				苏州
			</a>
		</li>
	</ul>
	<div class="a1" id="a1">作品1</div>
	<div class="a2" id="a2">作品2</div>
	<div class="a3" id="a3">作品3</div>
	<div class="a4" id="a4">作品4</div>
	<div class="a5" id="a5">作品5</div>
	<div class="a6" id="a6">作品6</div>

</body>
</html>